<template>
    <div id="picker" v-cloak>
        <van-popup v-model:show="show" position="bottom" :style="{ 'border-radius': '0.16rem 0.16rem 0 0',}" :close-on-click-overlay="false" >
            <van-picker :title="title" :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" confirm-button-text="确定" item-height="0.94rem" :type="type" :columns-field-names="customFieldName" />
        </van-popup>
    </div>
</template>
<script>
export default {
    name: 'picker',
    props: {
        title: {
            type: String
        },
        columns: {
            type: Array
        },
        show:{
            type:Boolean
        },
        type:{
            type:String
        },
        customFieldName:{
            type:String
        }
    },
    methods: {
        onCancel(){
            this.$parent.isClose();
        },
        onConfirm(value,index){
            this.$emit('change',value,index,this.type)
        },
        onChange(e){
            this.$emit('roll',e)
        }
    }
}
</script>

<style>
:root {
    --van-picker-toolbar-height: 0.92rem;
    --van-picker-action-font-size: 0.32rem;
    --van-picker-confirm-action-color: #428FFC;
    --van-picker-cancel-action-color: #686B73;
}

.van-picker__toolbar {
    border-bottom: 0.01rem solid #E8E9EC;
}

.van-picker-column__wrapper .van-ellipsis {
    font-size: 0.4rem;
}
</style>
<style scoped>
</style>